<template>
  <div>
    <Row>
      <Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
        <Input class="w-100" v-model="dict.code" placeholder="请输入字典编码" />
      </Col>
    </Row>
    <div class="d-flex justify-content-between align-items-center">
      <Button class="m-1" type="error" shape="circle" @click="newDict" icon="md-add">新增</Button>
      <Button class="m-1 " type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
    </div>
    <div class="mt-1 d-none d-xl-block">
      <Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" class="mr-2" @click="show(row.code)">详细</Button>
          <Button type="error" size="small" @click="remove(row.code)">删除</Button>
        </template>
      </Table>
    </div>
    <div class="mt-1 d-xl-none">
      <Row>
        <Col class="p-1" v-for="(dict, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="12">
          <div class="text-xss rounded shadow text-secondary p-1 bg-light">
            <div class="p-1 d-flex justify-content-between">
              <span>字典编码 </span><span>{{dict.code}}</span>
            </div>
            <div class="p-1 d-flex justify-content-between">
              <span>字典键值 </span><span>{{dict.value}}</span>
            </div>
            <div class="p-1 d-flex justify-content-between">
              <span>字典类型 </span><span>{{dict.type}}</span>
            </div>
            <div class="p-1 d-flex justify-content-between">
              <span>排序 </span><span>{{dict.sorte}}</span>
            </div>

            <div class="p-1 d-flex justify-content-end">
              <Button class="text-xss" type="error" size="small" @click="remove(dict.code)">删除</Button>
              <Button class="text-xss ml-2" type="primary" size="small" @click="show(dict.code)">详细</Button>

            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div>
    	<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
    		:total="tableInfo.total" />
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dict: {
        code: ""
      },
      // pageInfo: {
      //   current: 1,
      //   total: 0,
      //   size: 10,
      // },
      tableInfo: {
		  currentPage: 1,
		  pageSize: 10,
		  total: 0,
        columnInfo: [{
          title: "字典编码",
          key: "code",
        },
          {
            title: "字典键值",
            key: "value",
          },
          {
            title: "字典类型",
            key: "type",
          },
          {
            title: "排序",
            key: 'sort',

          },
          {
            title: "操作",
            slot: 'action',

          }
        ],
        data: []
      }
    };
  },

  methods: {
    init: function() {
      this.tableInfo.currentPage = 0;
      this.search();
    },
    newDict: function() {
      this.$router.detail.open({
        name: "dict_new",
      });
    },

	show: function(code) {
		console.log(code);
		this.$router.detail.open({
			name: "dict_detail",
			params: {
				code
			}
		});
	},
	
	
    search: function() {
      this.http.get({
        url: "/dict/page",
        param: {
          current: this.tableInfo.currentPage,
			size: this.tableInfo.pageSize,
          code: this.dict.code
        }
      }).then(data => {
		  console.log(11111)
		console.log(data)
        this.tableInfo.currentPage = data.current;
        this.tableInfo.total = data.total;
        this.tableInfo.pageSize = data.size;
        this.tableInfo.data = data.records;
      });
    },
    searchs: function() {
      this.tableInfo.currentPage = 0;
      this.search();
    },
    pageSearch: function(changedPage) {
      this.tableInfo.currentPage = changedPage;
      this.search();
    },
    remove: function(code) {

      this.message.confirm({
        title: "删除提示",
        content: "即将删除角色，确定吗？",
        onOk: () => {
          this.http.delete({
            url: "/dict/info",
            param: {
              code
            }
          }).then(data => {
            this.search();
            this.message.info('删除成功');
          });
        },
        onCancel: () => {
          this.message.info('操作已取消');
        }
      });
    },
  },
  created: function() {
    this.init();

  },
}
</script>

<style scoped>

</style>